<template>
  <a-row>
    <a-col :span="6">
      <span :style="{ fontSize: '20px' }">数据状态：</span>
      <a-select
          ref="select1"
          v-model:value="selectedOption1"
          :options="options1"
          @change="handleSelectChange1"
      ></a-select>
    </a-col>
    <a-col :span="8">
      <span :style="{ fontSize: '20px' }">数据权属：</span>
      <a-select
          ref="select2"
          v-model:value="selectedOption2"
          :options="options2"
          @change="handleSelectChange2"
      ></a-select>
    </a-col>
  </a-row>
  <div class="table-container">
    <a-table
        :columns="columns"
        :dataSource="paddedData"
        :pagination="pagination"
        :row-class-name="(_record, index) =>  index % 2 === 0 ? 'table-row-light' : 'table-row-dark' "
    >
      <template #bodyCell="{column, record}">  <!--理解为数组-->
        <template v-if="column.title === '实验备注' && record.DATA_SET !=='' ">
          <a>查看</a>
        </template>
        <template v-if="selectedOption2 === '我的数据' && column.title === '操作' && record.DATA_SET!=='' ">
        <span>
          <a @click="handleCheckDetail(record)">查看详情</a>
          <a-divider type="vertical" />
          <a  @click="handleDelete(record.key)">
            删除
          </a>
        </span>
        </template>
        <template v-else-if="selectedOption2 === '链上数据' && column.title === '操作' && record.DATA_SET !=='' ">
          <a>申请访问</a>
        </template>
      </template>
    </a-table>
  </div>
</template>

<script>
import axiosInstance from "@/axios/axios.js"
import {createWebHashHistory} from "vue-router";
export default {
  name: "DataInfoManage",
  components: {
  },
  created() {
    this.getMyData()
    //this.getChainData()
  },
  data() {
    return {
      pageNum:1,
      pageSize:8,
      selectedOption1:"上传成功",
      selectedOption2:"我的数据",
      dataLength:0,
      pictureAddress:'abc',
      columns: [
        {
          title: '数据集',
          dataIndex: 'DATA_SET',
        },
        {
          title: '实验批次',
          dataIndex: 'BATCH',
        },
        {
          title: '测试项',
          dataIndex: 'TEST_ITEM',
        },
        {
          title: '创建人',
          dataIndex: 'CREATOR',
        },
        {
          title: '实验时间',
          dataIndex: 'CREAT_TIME',
        },
        {
          title: '实验备注',
        },
        {
          title: '操作',
        },
      ],
      myData: [
      ],
      chainData:[
        {
          DATA_SET: '链上数据',
        },
      ],
      options1: [
        {
          value: '上传成功',
        },
      ],
      options2: [
        {
          value: '我的数据',
        },
        {
          value: '链上数据',
        },
      ],
    };
  },
  computed: {
    //当页面实际数据数量小于页面pageSize时，填充空白数据
    paddedData() {
      let padded;
      if (this.selectedOption2 === "我的数据"){
        padded = [...this.myData];
        this.dataLength = this.myData.length
      }
      else if(this.selectedOption2 ==="链上数据"){
        padded = [...this.chainData];
        this.dataLength = this.chainData.length
      }
      const emptyRows = this.pageSize - this.dataLength % this.pageSize;
      if (this.dataLength < this.pageSize && emptyRows !== this.pageSize) {
        for (let i = 0; i < emptyRows; i++) {
          padded.push({
            DATA_SET: '',
            BATCH: '',
            TEST_ITEM: '',
            CREATOR: '',
            CREAT_TIME: '',
          });
        }
      }
      return padded;
    },
    pagination() {
      return {
        current: this.pageNum,
        pageSize: this.pageSize,
        total: this.dataLength,
        showTotal: total => `共 ${total} 条`,
        onChange: this.handlePageChange
      }
    }
  },
  methods: {
    getMyData(){
      axiosInstance({
        method: "GET",
        url: "select1",
        // params:{
        //   STATE_UPLOAD: 'yourStateUploadValue',
        //   OWNERSHIP: 'yourOwnershipValue'
        // }
      })
          .then(response => {
            //response.data 是一个json数组
            this.myData = response.data
          })
          .catch(error => {
            console.error(error);
          });
    },
    getChainData(){
      axiosInstance({
        method: "GET",
        url: "select2",
        params:{
          // STATE_UPLOAD: 'yourStateUploadValue',
          // OWNERSHIP: 'yourOwnershipValue'
        }
      })
          .then(response => {
            this.chainData = response.data
            console.log(response);
          })
          .catch(error => {
            console.error(error);
            // Handle the error here
          });
    },
    handleDelete(id) {
      const index = this.data.findIndex(item => item.key === id);
      if (index !== -1) {
        // 从数据源中删除数据项
        this.data.splice(index, 1);
        console.log("已删除数据项，ID为：" + id);
      }
    },
    handlePageChange(page) {
      this.pageNum = page
    },
    handleSelectChange1(value){
      console.log("change1")
      this.selectedOption1 = value
    },
    handleSelectChange2(value){
      console.log("change2")
      this.selectedOption2 = value
    },
    handleCheckDetail(record){
      console.log(record)
      this.$router.push({
        path: '/datainfomanage/picturelist',
        query: { record: JSON.stringify(record) }
      });

    }

  }

};
</script>
<style scoped>
.table-container {
  margin: 20px; /* 页面边缘的距离 */
  max-width: 1200px; /* 表格的最大宽度 */
  width: 100%; /* 表格宽度，也可以是固定的像素值 */
}
:deep(.table-row-light) {
  background-color: #ffffff; /* 浅色行的颜色 */
}

:deep(.table-row-dark) {
  background-color: #f1f1f1; /* 深色行的颜色 */
}
</style>